<template>
  <div class="box">
    <el-row>
      <el-col :span="24">
        <div class="block gong">
          <div class="bb b1">通知公告</div>
          <div class="bb b2">2024-2025学年（上学期）护苗专线需求收集公告</div>
          <div class="bb b3">我县及下辖乡镇（街道）、村（社区）学校，请于2024年8月15日前在系统中登记学生出行计划。</div>
          <div class="bb b4">
            <div class="b11">咨询电话：138xxxxxxxx</div>
            <div class="b11">古蔺县交通局</div>
            <div class="b11">2024年8月1日</div>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="4" class="highlight">
        <div class="blockEven">
          <span>覆盖学校</span>
          <p class="label">{{numList.fgxx}}</p>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="blockEven">
          <span>覆盖乡镇</span>
          <p class="label">{{numList.fgxz}}</p>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="blockEven">
          <span>服务学生</span>
          <p class="label">{{numList.fwxs}}</p>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="blockEven">
          <span>开通线路</span>
          <p class="label">{{numList.ktlx}}</p>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="blockEven">
          <span>承运车辆</span>
          <p class="label">{{numList.cycl}}</p>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="blockEven">
          <span>参与企业</span>
          <p class="label">{{numList.cyqy}}</p>
        </div>
      </el-col>
    </el-row>
<!--    <el-row>-->
<!--      <el-col :span="24">-->
<!--        <el-card class="box-card">-->
<!--          <span>系统信息</span>-->
<!--          <el-divider></el-divider>-->
<!--          <el-table-->
<!--            :data="sysInfo"-->
<!--            :show-header="false"-->
<!--            border-->
<!--            style="width: 100%">-->
<!--            <el-table-column-->
<!--              prop="label">-->
<!--            </el-table-column>-->
<!--            <el-table-column-->
<!--              prop="value">-->
<!--            </el-table-column>-->
<!--          </el-table>-->
<!--        </el-card>-->
<!--      </el-col>-->
<!--    </el-row>-->
<!--    <el-row>-->
<!--      <el-col :span="24">-->
<!--        <el-card class="box-card">-->
<!--          <my_chart style="height: 320px" :option="option"></my_chart>-->
<!--        </el-card>-->
<!--      </el-col>-->
<!--    </el-row>-->
  </div>
</template>

<script>
    import * as c from '@/util/config'
    import * as u from '@/util/util'
    import {mapActions} from 'vuex'

    export default {
        name: "sy",
        components: {
            'my_chart': () => import('@/components/myChart/index.vue'),
        },
        data() {
            return {
                numList:[],
                //用户信息
                userInfo: u.getSession(c.sessionKey.USER_INFO),
                //系统信息
                sysInfo: [
                    {label: '系统版本', value: "2.0v"},
                    {label: '操作系统', value: "windows"},
                    {label: '数据库', value: "mysql5.7"},
                    {label: '运行环境', value: "jdk8/maven/node.js/redis"},
                ],
                option: {
                    title: {
                        text: '系统使用走势图'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['新增用户', '新增资源', '下载量']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: ['1月', '2月', '3月', '4月', '5月', '6月']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            name: '新增用户',
                            type: 'line',
                            stack: '总量',
                            data: [120, 132, 101, 134, 90, 230, 210]
                        },
                        {
                            name: '新增资源',
                            type: 'line',
                            stack: '总量',
                            data: [220, 182, 191, 234, 290, 330, 310]
                        },
                        {
                            name: '下载量',
                            type: 'line',
                            stack: '总量',
                            data: [150, 232, 201, 154, 190, 330, 410]
                        }
                    ]
                }
            }
        },
        mounted() {
        this.getData()
          },

      methods: {
            ...mapActions(["openWebSocket", "closeWebSocket"]),
           getData(){
             this.$HttpService.get(`/common/syNumberStatistics`).then(res => {
               console.log('resssssssss',res)
            this.numList = res
             })
           }
        },
        beforeDestroy() {
            //关闭socket连接
            this.closeWebSocket();
        }
    }
</script>

<style scoped lang="scss">
  .box {
    max-width: 100%;
    min-height: 100%;

    .gong{
      .bb{
        width: 100%;
        padding-bottom: 10px;
        padding-left: 20px;
      }
      .b1{
        font-weight: bold;
      }
      .b4{
        text-align: right;
        .b11{
          padding-top: 5px;
          padding-right: 50px;
          font-size: 14px;
          color: #606266;
        }
      }
    }

    .block {
      margin-bottom: 20px;
      padding: 15px 0;
      border-radius: 10px;
      background: #f2f2f2;
      color: #140000;

      span {
        margin-left: 20px;
      }

      .label {
        margin-left: 20px;
        color: #009688;
        font-size: 25px;
        margin-top: 10px;
        font-weight: bold;
      }
    }
    .blockOdd {
      margin-bottom: 20px;
      padding: 15px 0;
      border-radius: 10px;
      background: #f2f2f2;
      color: #140000;

      span {
        margin-left: 20px;
      }

      .label {
        margin-left: 20px;
        color: #009688;
        font-size: 25px;
        margin-top: 10px;
        font-weight: bold;
      }
    }
    .blockEven {
      margin-bottom: 20px;
      padding: 15px 0;
      border-radius: 10px;
      background: #e1dada;
      background: linear-gradient(to right, #8cc5f3, #e2e3e8);
      color: #140000;

      span {
        margin-left: 20px;
      }

      .label {
        margin-left: 20px;
        color: #009688;
        font-size: 25px;
        margin-top: 10px;
        font-weight: bold;
      }
    }

    .block:hover {
      background: #dcdcdc;
      cursor: pointer;
    }
  }


</style>
